<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '入住记录',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>
<template>
  <div class="content">
    <template v-if="dataList.length > 0">
      <wd-card v-for="(item, index) in dataList" :key="index">
        <view @click="() => goDetail(item)">
          <template #title>
            <view class="topBox">
              <view>{{ item.resideUserName }}</view>
              <view class="time">{{ item.createTime }}</view>
            </view>
          </template>
          <view class="allInfo">
            <view class="item">
              <view class="mr-[20upx]">出差事由:</view>
              <view>{{ item.resideCause }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">申请入住日期:</view>
              <view>{{ item.resideInDate }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">预计退房日期:</view>
              <view>{{ item.resideOutDate }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">分配宿舍:</view>
              <view>{{ item.roomNo }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">入住日期:</view>
              <view>{{ item.resideActInDate }}</view>
            </view>
            <view class="item">
              <view class="mr-[20upx]">退房日期:</view>
              <view>{{ item.resideActOutDate }}</view>
            </view>
          </view>
          <view class="text-right">
            <view
              class="btnBox"
              :class="{
                btn1:
                  item.resideApplyStatus == 2 ||
                  item.resideApplyStatus == 3 ||
                  item.resideApplyStatus == 5,
                btn2:
                  item.resideApplyStatus == 6 ||
                  item.resideApplyStatus == 7 ||
                  item.resideApplyStatus == 8 ||
                  item.resideApplyStatus == 9,
                btn3:
                  item.resideApplyStatus == 0 ||
                  item.resideApplyStatus == 1 ||
                  item.resideApplyStatus == 4,
              }"
            >
              {{ getStatusName(item.resideApplyStatus) }}
            </view>
          </view>
        </view>
      </wd-card>
    </template>
    <wd-status-tip v-else image="search" tip="暂无数据" />
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
  </div>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { userRecord, userDetail } from '@/api/staff/registration.js'
import { useSysStore } from '@/store/systemInfo'
import { useStaffStore } from '@/store'
import { getDormitoryStatus } from '@/api/administration/hostelInfo.js'

defineOptions({
  name: 'Record',
})

const statusList = ref([])
const sysStore = useSysStore()
const staffStore = useStaffStore()
const userInfo = ref({})
const scrollTop = ref(0)
const dataList = ref([])

onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
onMounted(async () => {
  userInfo.value = { ...sysStore.userInfo }
  await getStatus()
  getDataList()
})

const goDetail = async (item) => {
  const res = await userDetail({
    id: item.id,
  })
  await staffStore.setStaffInfo(res.data.rows[0])
  uni.navigateTo({
    url: '/pages/staff/record/detail',
  })
}

// 获取宿舍状态数据
const getStatus = async () => {
  const res = await getDormitoryStatus()
  statusList.value = res.data.data || []
}

// 获取状态名称
const getStatusName = (status) => {
  const item = statusList.value.find((item) => {
    return item.dictValue == status
  })
  return item ? item.dictLabel : ''
}

// 获取数据列表
const getDataList = async () => {
  const res = await userRecord({
    pageNum: 1,
    pageSize: 10000,
    resideUserId: userInfo.value.userId,
  })
  dataList.value = res.data.rows || []
}
</script>

<style lang="scss" scoped>
:deep() {
  .wd-card__title-content {
    padding: 14upx 0upx;
  }
  .wd-card__footer {
    padding: 14upx 0upx;
  }
}
.content {
  background-color: #f1f1f1;
  min-height: 100vh;
  padding: 30upx 0upx;
  .topBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20upx;
    font-size: 32upx;
    color: black;
    .time {
      font-size: 24upx;
      color: #999;
    }
  }
  .allInfo {
    .item {
      display: flex;
      align-items: center;
      line-height: 50upx;
    }
  }
  .btnBox {
    padding: 5upx 10upx;
    display: inline-block;
  }
  .btn1 {
    border: 1px solid #cf8428;
    color: #cf8428;
    border-radius: 10upx;
  }
  .btn2 {
    border: 1px solid #75c514;
    color: #75c514;
    border-radius: 10upx;
  }
  .btn3 {
    border: 1px solid #4d80f0;
    color: #4d80f0;
    border-radius: 10upx;
  }
}
</style>
